import React from 'react';
import { FloatButton as AntFloatButton } from 'antd';
import type { FloatButtonComponent, FloatButtonProps } from './interface';
import './styles/index.less';

/** 悬浮按钮组件 */
const FloatButton: FloatButtonComponent = (props) => {
  const {
    antNative = false,
    className,
    children,
    position = 'bottom',
    offset = [24, 24],
    visible = true,
    style,
    ...restProps
  } = props;

  // 如果使用原生属性，直接返回 antd 组件
  if (antNative) {
    return (
      <AntFloatButton className={className} style={style} {...restProps}>
        {children}
      </AntFloatButton>
    );
  }

  const buttonStyle = {
    display: visible ? 'block' : 'none',
    ...(position === 'top'
      ? { top: offset[0], right: offset[1] }
      : { bottom: offset[0], right: offset[1] }),
    ...style,
  };

  return (
    <AntFloatButton
      className={`xwd-float-button ${className || ''}`}
      style={buttonStyle}
      {...restProps}
    >
      {children}
    </AntFloatButton>
  );
};

FloatButton.BackTop = AntFloatButton.BackTop;
FloatButton.Group = AntFloatButton.Group;

export type { FloatButtonProps };
export default FloatButton;
